import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, Form, Input, Modal, Row, Select, Table, Tag } from 'antd';
import { useMemo, useState } from 'react';

export default () => {
  const [open, setOpen] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [editRow, setEditRow] = useState(null);
  const [form] = Form.useForm();

  const columns = [
    {
      title: '模型名称',
      width: 100,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '对象范围',
      width: 200,
      dataIndex: 'arange',
      key: 'arange',
      render: (_) => {
        return <pre>{_}</pre>;
      },
      options: [
        { label: '单位', value: '单位' },
        { label: '人员条件', value: '人员条件' },
      ],
    },
    {
      title: '行为',
      width: 100,
      dataIndex: 'behave',
      key: 'behave',
      options: [
        { label: '巡控登记台账', value: '巡控登记台账' },
        { label: '服药记录', value: '服药记录' },
        { label: '风险分数', value: '风险分数' },
        { label: '新收押人员入所', value: '新收押人员入所' },
        { label: '诉讼环节发生变化', value: '诉讼环节发生变化' },
        { label: '思想不稳定、表现异常', value: '思想不稳定、表现异常' },
        { label: '家庭发生变故', value: '家庭发生变故' },
        { label: '被加戴械具、处罚', value: '被加戴械具、处罚' },
        { label: '调换监室', value: '调换监室' },
        { label: '要求反映监室动态', value: '要求反映监室动态' },
        { label: '出所前谈话', value: '出所前谈话' },
      ],
    },
    {
      title: '触发条件',
      dataIndex: 'tiaojian',
      key: 'tiaojian',
      width: 180,
    },
    {
      title: '级别',
      dataIndex: 'level',
      key: 'level',
      width: 100,
      options: [
        { label: '一级', value: '一级' },
        { label: '二级', value: '二级' },
        { label: '三级', value: '三级' },
      ],
    },
    {
      title: '预警推送对象',
      dataIndex: 'duixiang',
      key: 'duixiang',
      width: 120,
      options: [
        { label: '管教', value: '管教' },
        { label: '医生', value: '医生' },
        { label: '巡控', value: '巡控' },
      ],
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      options: [
        { label: '开启', value: '开启' },
        { label: '关闭', value: '关闭' },
      ],
      render: (_) => {
        if (_ === '关闭') return <Tag color="red">{_}</Tag>;

        return <Tag color="green">{_}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_) => (
        <Row gutter={[10, 10]}>
          {/* <Col>
            <Button>详情</Button>
          </Col> */}
          <Col>
            <Button>编辑</Button>
          </Col>
          <Col>
            <Button>开启</Button>
          </Col>
          <Col>
            <Button>关闭</Button>
          </Col>
        </Row>
      ),
    },
  ];

  const data = [
    {
      name: '加戴械具人员巡控',
      arange: `
  单位：xx拘留所
  人员：加戴械具`,
      behave: '巡控登记台账',
      tiaojian: '大于30分钟',
      level: '三级',
      duixiang: '管教',
      status: '开启',
    },
    {
      name: '服药预警',
      arange: `
  单位：xx拘留所
  人员：服药中`,
      behave: '服药记录',
      tiaojian: '大于1天',
      level: '三级',
      duixiang: '护士',
      status: '开启',
    },
    {
      name: '风险预警',
      arange: `
  单位：xx拘留所
  人员：全部`,
      behave: '风险分数',
      tiaojian: '大于10',
      level: '二级',
      duixiang: '管教',
      status: '开启',
    },
    {
      name: '巡视预警',
      arange: `
  单位：xx拘留所
  人员：全部`,
      behave: '巡控登记台账',
      tiaojian: '大于3小时',
      level: '三级',
      duixiang: '巡控',
      status: '开启',
    },
    {
      name: '新收押人员入所谈话',
      arange: `
  单位：xx拘留所
  人员：全部`,
      behave: '新收押人员入所谈话',
      tiaojian: '大于30分钟',
      level: '一级',
      duixiang: '管教',
      status: '开启',
    },
    {
      name: '诉讼环节发生变化谈话',
      arange: `
  单位：xx拘留所
  人员：全部`,
      behave: '诉讼环节发生变化谈话',
      tiaojian: '大于1天',
      level: '一级',
      duixiang: '管教',
      status: '开启',
    },
    {
      name: '出所前谈话',
      arange: `
  单位：xx拘留所
  人员：全部`,
      behave: '出所前谈话',
      tiaojian: '大于8小时',
      level: '一级',
      duixiang: '管教',
      status: '开启',
    },
  ];

  const onOkAdapter = (values) => {
    const nValues: any = {};
    Object.keys(values).forEach((key) => {
      if (key?.indexOf('time') !== -1) {
        nValues[key] = values[key]?.format('YYYY-MM-DD hh:mm:ss');
      } else {
        nValues[key] = values[key];
      }
    });
    return nValues;
  };

  const handleOk = () => {
    if (isEdit) {
      form.validateFields().then((values) => {
        console.log('😈values', values);
        const nValues = onOkAdapter(values);
        const nData = cloneDeep(data);
        nData[editRow.index] = { index: editRow.index, ...nValues };
        console.log('😈nValues', nValues);
        setData(nData);
        setOpen(false);
        form.resetFields();
      });

      return;
    }

    form.validateFields().then((values) => {
      const nValues = onOkAdapter(values);
      setOpen(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setOpen(false);
  };

  const nColumns = useMemo(() => {
    const leftColumns = columns.slice(0, 1);
    const _c = [
      {
        title: '单位',
        dataIndex: 'danwei',
        key: 'danwei',
        width: 100,
        options: [
          { label: '一所', value: '一所' },
          { label: '二所', value: '二所' },
          { label: '三所', value: '三所' },
        ],
      },
      {
        title: '人员',
        dataIndex: 'renyuan',
        key: 'renyuan',
        width: 100,
        options: [
          { label: '全部', value: '全部' },
          { label: '一级重大安全风险人员', value: '一级重大安全风险人员' },
          { label: '加戴械具人员', value: '加戴械具人员' },
          { label: '病人', value: '病人' },
          { label: '新入所', value: '新入所' },
          { label: '准备出所', value: '准备出所' },
        ],
      },
    ];
    const rightColumns = columns.slice(1);
    return [...leftColumns, ..._c, ...rightColumns];
  }, [columns]);

  return (
    <PageContainer>
      <Modal title={isEdit ? '编辑' : '新增'} open={open} onOk={handleOk} onCancel={handleCancel}>
        <Card>
          <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 19 }}>
            {nColumns.map((item, index) => {
              if (item.title === '对象范围') return null;
              if (item.key === 'action') return null;

              if (item.options)
                return (
                  <Form.Item label={item.title} name={item.key} key={item.key}>
                    <Select>
                      {item.options?.map((item) => (
                        <Select.Option key={item.value}>{item.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                );

              if (item.key?.indexOf('tiaojian') !== -1)
                return (
                  <Form.Item
                    // rules={[{ required: true, message: '请选择' }]}
                    label={item.title}
                    name={item.key}
                    key={item.key}
                  >
                    <div className="flex-aic">
                      <Select>
                        <Select.Option value="大于">{'大于'}</Select.Option>
                        <Select.Option value="小于">{'小于'}</Select.Option>
                        <Select.Option value="等于">{'等于'}</Select.Option>
                      </Select>
                      <Input type="number" className="ml10"></Input>
                      <Select className="ml10">
                        <Select.Option value="天">{'天'}</Select.Option>
                        <Select.Option value="小时">{'小时'}</Select.Option>
                        <Select.Option value="分钟">{'分钟'}</Select.Option>
                      </Select>
                    </div>
                  </Form.Item>
                );

              return (
                <Form.Item
                  //   rules={[{ required: true, message: '请输入' }]}
                  label={item.title}
                  name={item.key}
                  key={item.key}
                >
                  <Input></Input>
                </Form.Item>
              );
            })}

            <Form.Item
              label={'执行频率'}
              //   name={item.key}
              //   key={item.key}
            >
              <div className="flex-aic">
                {/* <Select>
                        <Select.Option value="大于">{'大于'}</Select.Option>
                        <Select.Option value="小于">{'小于'}</Select.Option>
                        <Select.Option value="等于">{'等于'}</Select.Option>
                      </Select> */}
                <Input type="number" className=""></Input>
                <Select className="ml10">
                  <Select.Option value="天">{'天'}</Select.Option>
                  <Select.Option value="小时">{'小时'}</Select.Option>
                  <Select.Option value="分钟">{'分钟'}</Select.Option>
                </Select>
              </div>
            </Form.Item>

            <Form.Item
              label={'消息推送模板'}
              //   name={item.key}
              //   key={item.key}
            >
              <Input.TextArea rows={5}></Input.TextArea>
            </Form.Item>
          </Form>
        </Card>
      </Modal>

      <Button
        type="primary"
        onClick={() => {
          setOpen(true);
          setIsEdit(false);
        }}
      >
        新增
      </Button>
      <Table className="mt10" columns={columns} dataSource={data}></Table>
    </PageContainer>
  );
};
